<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <el-input v-model="searchForm.name" placeholder="姓名" size="small"
                    class="w-140 mr-10"></el-input>
          <el-select v-model="searchForm.job_id" placeholder="选择岗位" size="small">
            <el-option
                v-for="item in jobList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i
              class="el-icon-search"></i>搜索
          </el-button>
          <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        </div>
      </div>
      <el-tabs v-model="searchForm.status" type="card">
        <el-tab-pane :label="`在职人员（${numberList[0]}）`" name="1"></el-tab-pane>
        <el-tab-pane :label="`离职人员（${numberList[1]}）`" name="0"></el-tab-pane>
      </el-tabs>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :border="tableoption.tableBorder"
              tooltip-effect="dark">
            <el-table-column
                align="center"
                prop="id"
                label="ID"
                width="80">
            </el-table-column>
            <el-table-column
                label="岗位"
                align="center"
                prop="job">
            </el-table-column>
            <el-table-column
                label="姓名"
                align="center"
                prop="name">
            </el-table-column>
            <el-table-column
                label="电话"
                align="center"
                prop="mobile_phone">
            </el-table-column>
            <el-table-column
                label="照片"
                align="center"
                width="60">
              <template slot-scope="scope">
                <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
              </template>
            </el-table-column>
            <el-table-column
                label="性别"
                align="center"
                width="50">
              <template slot-scope="scope">
                {{ scope.row.sex == 1 ? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column
                label="学历"
                align="center">
              <template slot-scope="scope">
                {{scope.row.edu?scope.row.edu.name: ''}}
              </template>
            </el-table-column>
            <el-table-column
                label="录用时间"
                align="center"
                prop="create_time">
            </el-table-column>
            <el-table-column
                label="合同期限"
                align="center">
              <template slot-scope="scope">
                {{scope.row.end_time?scope.row.end_time:''}}
                <p v-if="scope.row.contractStatus&&(scope.row.contractStatus.type==1||scope.row.contractStatus.type==2||scope.row.contractStatus.type==3)">
                  <el-link type="danger" :underline="false">{{scope.row.contractStatus.title}}</el-link>
                </p>
              </template>
            </el-table-column>
            <el-table-column
                label="服务年限"
                align="center"
                width="80">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
              <template slot-scope="scope">
                <el-button size="small" @click="showArchivesDetail(scope.row.id)">查看档案详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <archivesDetail :archivesId="archivesId" :visible.sync="archivesVisible"></archivesDetail>
  </div>
</template>

<script>
import {pagination, tableoption, yearDayLine} from '@/utils/util.js'
import archivesDetail from "./archivesDetail";

export default {
  components: {
    archivesDetail
  },
  data() {
    return {
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      searchForm: {
        job_id: '',
        name: '',
        status: '1' // 在职 1 0 离职
      },
      numberList: [0, 0],
      activeName: 'first',
      activeNamechange: 'first',
      jobList: [],
      archivesId: 0,
      archivesVisible: false
    }
  },
  watch: {
    'searchForm.status'() {
      this.page.pageindex = 1
      this.arryList = []
      this.InitFn()
    }
  },
  created() {
    this.JobFn()
    this.InitFn()
    console.log('时间排序：',this.dateFn('2022-10-20'))
  },
  methods: {
    async InitFn() {
      let that = this
      this.searchForm.p = this.page.pageindex
      let data = await this.$fetch(this.api.archives.index, this.searchForm);
      if (!data.code) {
        for(let item of data.list.data){
          if(item.end_time){
            item.contractStatus = that.dateFn(item.end_time)
          }
        }
        this.arryList = data.list.data
        this.page.total = data.list.total
        this.numberList = this.getJson(data.number)
      }
    },
    dateFn(endTime) {
      //建立一个功能
      let date1 = new Date(yearDayLine(new Date()));//建立新的Date对象用来获取当前的时间
      let date2 = new Date(endTime);//这里来输入你想查询的距离的时间，我这里设置的是
      let timeFn = this.chajuFn(date1, date2)
      if (timeFn) {
        if (timeFn === 'today') {
          return {type: 1, title: '今日到期'}
        } else {
          if((date2 - date1) / (1000 * 60 * 60 * 24)>45){
            return {type: 4};
          }else{
            return {type: 2, title: `剩余${(date2 - date1) / (1000 * 60 * 60 * 24)}天`};
          }
        }
      } else {
        return {type: 3, title: '已过期'}
      }
    },
    chajuFn(date1, date2) {
      // date1 当前时间 date2开始时间
      let time1 = date1.getTime();//将日期转换成毫秒值
      let time2 = date2.getTime();
      if (time1 > time2) {
        return false;
      } else if (time1 === time2) {
        return 'today';
      } else {
        return time2 - time1;
      }
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 获取岗位信息
    async JobFn() {
      let data = await this.$fetch(this.api.recruit.job.index, {p: 1});
      this.jobList = data.list.data;
    },
    searchFn(option) {
      if (option === 'refresh') {
        this.searchForm.name = ''
        this.searchForm.job_id = ''
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    showArchivesDetail(id) {
      this.archivesId = id;
      this.archivesVisible = true
    }
  },
  mounted() {
  }
}
</script>
<style>
</style>
